<template>
  <div class="order">
    <!-- 收获地址 -->
    <div class="address" @click="selectAddress">
      <div class="address_wrapper" v-if="address">
        <div class="address_top">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/people.png"  class="address_top_header">
          <div class="address_top_nick">{{address.consignee}}</div>
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/tel.png"  class="address_top_phone">
          <div class="address_top_tel">{{address.phone}}</div>
        </div>
        <div class="address_bottom">
          {{address.province}}-{{address.city}}-{{address.area}}-{{address.add_detail}}
        </div>
      </div>
      <div v-else class="address_tip">填写收获地址</div>
      <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png"  class="right_arrow">
    </div>
    <!-- 收获地址结束 -->

    <!-- 订单列表 -->
    <div class="orderList">
      <div>商品列表</div>
       <div class="orderList_item" v-for="(value,index) in goodsDetail.goods_info" :key="index" @click="toGoodsDetail(value.good_id)"> 
         <img :src="value.thumb_url">
         <div class="orderList_item_content">
           <div class="orderList_item_content_top">
            <div class="orderList_item_content_top1">
              <!-- <span>海外购</span> -->
                <span>
                  {{value.name}}
                </span>
            </div>
            <div class="orderList_item_content_top2" v-if="shopType=='common'">￥{{value.goods_spu_info.price}}</div>
            <div class="orderList_item_content_top2" v-if="shopType=='integral'">积分: {{value.exchange_integral}}</div>
           </div>
           <div class="orderList_item_content_bottom">
            <div class="orderList_item_content_bottom1" v-if="shopType=='common'||shopType=='bargin' ||shopType=='group'">
              {{value.goods_spu_info.spu_name}}
            </div>
            <div class="orderList_item_content_bottom2">x {{value.goods_num}}</div>
           </div>
         </div>
       </div>
    </div>
    <!-- 订单列表结束 -->

    <!-- 订单信息 -->
    <div class="order_information">
      <div class="order_information_item">
        <div>支付方式</div>
        <div v-if="shopType=='integral'">积分支付</div>
        <div v-if="shopType=='common'||shopType=='bargain'||shopType=='group'">微信支付</div>
        <!-- <picker @change="selectPayType" :value="payType" :range="payArray" style="margin-right:10px;">
          <view class="picker">
            {{payArray[payType]}}
          </view>
        </picker> -->
      </div>
<!--       <div class="order_information_item">
        <div>配送快递</div>
        <picker @change="selectPayType" :value="payType" :range="payArray" style="margin-right:10px;">
          <view class="picker">
            {{payArray[payType]}}
          </view>
        </picker>
      </div> -->
<!--       <div class="order_information_item">
        <div>发票信息</div>
        <picker @change="selectPayType" :value="payType" :range="payArray" style="margin-right:10px;">
          <view class="picker">
            {{payArray[payType]}}
          </view>
        </picker>
      </div> -->
<!--       <div class="order_information_item">
        <div>储值卡</div>
        <picker @change="selectPayType" :value="payType" :range="payArray" style="margin-right:10px;">
          <view class="picker">
            {{payArray[payType]}}
          </view>
        </picker>
      </div> -->
      <div class="order_information_item">
        <div>快递方式</div>
        <!-- <picker @change="selectCompanyIndex" :value="companyIndex" :range="companyArr" style="margin-right:10px;">
          <view class="picker">
            {{companyArr[companyIndex]}}
          </view>
        </picker> -->
        <div>{{company.name}}</div>
      </div>
      <div class="order_information_item" v-if="shopType=='integral'">
        <div>积分消费</div>
        <div>{{goodsDetail.goods_info[0].exchange_integral*goodsDetail.goods_info[0].goods_num}}</div>
      </div>
      <div class="order_information_item" @click="toCoupon" v-if="shopType=='common'">
        <div>优惠券</div>
        <div>{{coupon.name||'未使用 >'}}</div>
      </div>
      <div class="order_information_item">
        <div>运费</div>
        <div>￥{{goodsDetail.express_fee}}</div>
      </div>
      <div class="order_information_item">
        <div>商品金额</div>
        <div>￥{{goodsDetail.goods_total_amount}}</div>
      </div>
      <div class="order_information_remark">
        <div>备注</div>
        <input type="text" placeholder="如需备注请输入" v-model="remark">
      </div>
    </div>
    <!-- 订单信息结束 -->
    <div class="pay">
      <div>合计：￥{{goodsDetail.goods_total_amount}}</div>
      <div class="pay_btn" @click="orderConfirm" v-if="shopType=='common'||shopType=='bargain'||shopType=='group'">生成订单</div>
      <div class="pay_btn" @click="orderConfirm" v-if="shopType=='integral'">立即兑换</div>
    </div>
  </div>
</template>

<script>


export default {
  name:'order',
  data(){
    return {
      payType:0,
      payArray:['微信支付', '货到付款'],
      companyId:[],
      companyArr:[],
      companyIndex:0,
      orderId:"",   //订单号
      remark:"",    //备注信息
      address:"",  //地址详情
      company:'',//快递公司
      type:'',//订单类型shop_cart来自购物车
      shopType:''//integral积分,bargain砍价,common普通商品
    }
  },
  computed: {
    goodsDetail(){

      return this.$store.state.modulesOrder.order
    },
    coupon:{
      get:function(){
        return this.$store.state.modulesCoupon.coupon
      }
    }
  },
  watch:{
    coupon(nval){
      if(nval){
         this.$set(this.goodsDetail,'goods_total_amount',nval.goods_money)
      }
    },
    goodsDetail(nval){
      // if(nval.goods_info[0].type=='integral'){
      //   this.credit=true;
      // }else{
      //   this.credit=false
      // }
      switch(nval.goods_info[0].type){
        case 'integral': this.shopType='integral';break;
        case 'bargain':this.shopType='bargain';break;
        case 'common':this.shopType='common';break;
        case 'group':this.shopType='group';break;
      }
    },
    shopType(nval){
      console.log(this.$store.state.modulesOrder.order)
    }
  },
  methods:{
    selectPayType(e){
      this.payType=e.target.value
    },
    selectAddress(){
      this.$currency.navigateTo(`/pages/address/main?orderId=${this.orderId}`)
      
    },
    async getExpressCompany(){//获取快递公司列表
      let res=await this.$request.getData('/other/getExpressCompany')
      if(res.data.level=='success'){
        this.company=res.data.data
      }
    },
     async orderConfirm(){//生成订单
        if(this.address==''){
            this.$currency.showToast('未填写收获地址')
            let value=this.goodsDetail
            setTimeout(()=>{
              this.$currency.navigateTo(`/pages/address/main`)
            },1000)
            return
          }
        var userToken=wx.getStorageSync('userToken')
        if(this.coupon){
          var coupon=this.coupon.id
        }
        if(this.shopType=='integral'){
          if(this.goodsDetail.express_fee==0){//不需要邮费
            let res1=await this.$currency.showModal('兑换商品','是否兑换商品')
            if(res1){
              let res=await this.$request.postData('/order/buildOrder',{
                type:'',
                num:this.goodsDetail.goods_info[0].goods_num,
                goods_id:this.goodsDetail.goods_info[0].id,
                user_token:userToken,
                address_id:this.address.id,
                remark:this.remark,
                coupon_id:coupon,
                good_spu_id:''
              })
              if(res.data.level=='success'){
                  this.$currency.showToast('兑换商品成功','success')
                  setTimeout(()=>{
                      this.$currency.switchTab(`/pages/me/main`)
                  },1500)
              }
            }
          }else{
            let res=await this.$request.postData('/order/buildOrder',{
              type:'',
              num:this.goodsDetail.goods_info[0].goods_num,
              goods_id:this.goodsDetail.goods_info[0].id,
              user_token:userToken,
              address_id:this.address.id,
              remark:this.remark,
              coupon_id:coupon,
              good_spu_id:''
            })
            if(res.data.level=='success'){
              this.$currency.navigateTo(`/pages/orderDetail/main?num=${res.data.data.order_num}`)
            }
          }
          return
        }
        if(this.type!='shop_cart' && this.shopType=='common'){//商城直接下单
            let res=await this.$request.postData('/order/buildOrder',{
            type:'',
            num:this.goodsDetail.goods_info[0].goods_num,
            goods_id:this.goodsDetail.goods_info[0].id,
            user_token:userToken,
            address_id:this.address.id,
            remark:this.remark,
            coupon_id:coupon,
            good_spu_id:this.goodsDetail.goods_info[0].goods_spu_info.id
          })
          if(res.data.level=='success'){
          this.$currency.navigateTo(`/pages/orderDetail/main?num=${res.data.data.order_num}`)
        }
        }else if(this.type!='shop_cart' && this.shopType=='bargain'){//砍价
            let res=await this.$request.postData('/order/buildOrder',{
            type:'bargain',
            num:this.goodsDetail.goods_info[0].goods_num,
            goods_id:this.goodsDetail.goods_info[0].id,
            user_token:userToken,
            address_id:this.address.id,
            remark:this.remark,
            good_spu_id:this.goodsDetail.goods_info[0].goods_spu_info.id,
            activity_id:this.goodsDetail.activity_info.id//活动id
          })
          if(res.data.level=='success'){
            this.$currency.navigateTo(`/pages/orderDetail/main?num=${res.data.data.order_num}`)
          }
        }
        else if(this.type!='shop_cart' && this.shopType=='group'){//拼团
            var group_id=null;
            if(this.goodsDetail.group_type=='part'){
              //拼团非团长
              group_id=this.goodsDetail.group_id;

            }
            let res=await this.$request.postData('/order/buildOrder',{
            type:'group',
            num:this.goodsDetail.goods_info[0].goods_num,
            goods_id:this.goodsDetail.goods_info[0].id,
            user_token:userToken,
            address_id:this.address.id,
            remark:this.remark,
            good_spu_id:this.goodsDetail.goods_info[0].goods_spu_info.id,
            activity_id:this.goodsDetail.activity_info.id,//活动id
            group_type:this.goodsDetail.group_type,
            group_id
          })
          if(res.data.level=='success'){
            this.$currency.navigateTo(`/pages/orderDetail/main?num=${res.data.data.order_num}`)
          }
        }
        else if(this.type=='shop_cart' && this.shopType=='common'){//商城购物车下单
            let res=await this.$request.postData('/order/buildOrder',{
            type:this.type,
            num:'',
            goods_id:this.goodsDetail.shop_cart,
            user_token:userToken,
            address_id:this.address.id,
            remark:this.remark,
            coupon_id:coupon
          })
          if(res.data.level=='success'){
          this.$currency.navigateTo(`/pages/orderDetail/main?num=${res.data.data.order_num}`)
        }
        }
        
  
    },
    // async payment(){
    //   let _this=this
    //   var userToken=wx.getStorageSync('userToken')
    //   if(this.address==''){
    //     this.$currency.showToast('未填写收获地址')
    //     setTimeout(()=>{
    //       this.$currency.navigateTo(`/pages/address/main?orderId=${this.orderId}`)
    //     },1000)
    //   }
    //   let res=await this.$request.postData('/payment/weChatPayment',{order_num:this.orderId,user_token:userToken,express_id:this.companyId[this.companyIndex],remark:this.remark,address_id:this.address.id})
    //   let data=res.data.data
    //   wx.requestPayment({
    //     timeStamp: data.timeStamp,
    //     nonceStr: data.nonceStr,
    //     package: data.package,
    //     signType: data.signType,
    //     paySign: data.paySign,
    //     success() {
    //       _this.$currency.showToast('支付成功')
    //       setTimeout(()=>{
    //         wx.switchTab({url:'/pages/me/main'})
    //       },1500)
    //     },
    //     fail(res) {
    //       console.log('取消支付')
    //     }
    //   })

    // },
    async getAddressDetails(){
      var userToken=wx.getStorageSync('userToken')
      if(this.$store.state.modulesAddress.address){
        this.address=this.$store.state.modulesAddress.address;
        return
      }
      let res=await this.$request.getData('/ucenter/getShippingAddress',{user_token:userToken})
      let address=res.data.data.filter((item)=>{
        return item.is_default=='1'
      })
      if(address.length!=0){
        this.address=address[0]
      }else{
        this.address=''
      }
    },
    toGoodsDetail(id){
        this.$currency.navigateTo('/pages/goodsDetail/main?id='+id)
      },
    toCoupon(){
      var userToken=wx.getStorageSync('userToken')
      if(this.type=='shop_cart'){
          var type='shop';
          var goods_arr=this.goodsDetail.goods_info.map((val)=>{
            return {'good_id':val.id,'num':val.goods_num,'goods_spu_id':val.goods_spu_info.id}
          })
          var req={
            'type':type,
            user_token:userToken,
            goods_id:goods_arr,
          }
        }else{
          var type='';
          var req={
            'type':type,
            user_token:userToken,
            goods_id:this.goodsDetail.goods_info[0].id,
            num:this.goodsDetail.goods_info[0].goods_num,
            goods_spu_id:this.goodsDetail.goods_info[0].goods_spu_info.id,
          }
        }
      const params=JSON.stringify(req)
      this.$currency.navigateTo(`/pages/coupon/main?type=order&params=${params}`)
    }
  },
  onLoad(options){
    this.type=''
    if(options.type=='cart'){
      this.type='shop_cart'
    }
    // this.orderId=options.orderId
    // this.getCartList(options.orderId)
    // if(options.valu==''||options.value==undefined){
    //   this.getAddressDetails()
    // }else{
    //   let value=JSON.parse(options.value)
    //   this.address=value
    // }
  },
  onShow(){
    this.getExpressCompany()
    this.getAddressDetails()
  }
}
</script>

<style scoped>
  .order{
    width:100%;
    background: #eee;
    height: 100%;
    font-size: 13px;
  }

  /* 收获地址  */
  .address{
    width:100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 12px;
    background: #fff;
    /* border-bottom: 1px dashed gray; */

  }
  .address img{
    width:16px;
    height: 16px;
  }
  .address_wrapper{
    flex:1
  }
  .address_tip{
    margin-left: 10px;
    font-size: 14px;
    flex:1;
  }
  .address_top{
    display: flex;
    align-items: center;
    padding:5px;
    margin-left:10px;
  }
  .address_top_nick{
    margin:0 10px;
  }
  .address_bottom{
    margin-left:20px;
    margin-bottom: 10px;
  }
  .right_arrow{
    margin-right:25px;
  }

  /* 商品列表 */
  .orderList{
    width:100%;
    font-size: 14px;
    line-height: 20px;
    margin-top:20px;
  }
  .orderList>div:nth-child(1){
    padding-left:10px;
    background: #fff;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #eee;
  }
  .orderList_item{
    background: #fff;
    display: flex;
    padding:10px;
    border-bottom: 1px solid #eee;
  }
  .orderList_item>img{
    width:80px;
    height: 80px;
  }
  .orderList_item_content{
    flex:1;
    display: flex;
    align-items: space-around;
    flex-wrap: wrap;
    margin-left:10px;
  }
  .orderList_item_content_top,.orderList_item_content_bottom{
    display: flex;
    justify-content: space-between;
    width:100%;
  }
  .orderList_item_content_top1{
    margin-right:30px;
  }
  /* .orderList_item_content_top1>span:nth-child(1){
    border:1px solid purple;
    color:purple;
    border-radius: 5px;
    font-size: 12px;
  } */
  .orderList_item_content_bottom{
    color:gray;
  }

  /* 订单信息 */
  .order_information{
    width:100%;
    margin-top:20px;
    margin-bottom:60px;
  }
  .order_information_item{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    height: 40px;
    border-bottom: 1px solid #eee;
  }
  .order_information_remark{
    width:100%;
    display: flex;
    align-items: center;
    background: #fff;
    height: 40px;
  }
  .order_information_remark>input{
    margin-left:50px;
  }
  .order_information_item>div:nth-child(1),.order_information_remark>div:nth-child(1){
    margin-left:10px;
  }
  .order_information_item>div:nth-child(2){
    margin-right:10px;
  }

  .pay{
    width:100%;
    position: fixed;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    z-index: 99;
    border-top:1px solid #eee;
  }
  .pay>div:nth-child(1){
    color:red;
    margin-right: 10px;
  }
  .pay_btn{
    color:#fff;
    width:120px;
    text-align: center;
    background: red;
  }

  /* 后续补充的样式 */
  .orderList_item_content_bottom1{
    width:220px;
  }
</style>
